<template>
    <div class="container">
        <input type="checkbox" name="" id="" v-model="sproduct.state">
        <img :src="sproduct.imgPath" alt="" width="80px" height="80px">
        <div class="info">
            <h4>{{sproduct.title}}</h4>
            <p>{{sproduct.price}}</p>
        </div>
        <div>数量：
            <input type="button" value=" + " @click="sproduct.count++">
            {{sproduct.count}}
            <input type="button" value=" - " @click="sproduct.count--">
        </div>
    </div>
</template>
<script>
export default {
    name:'ProductDetail',
    props: ['sproduct']
}
</script>
<style scoped>
.container{
    display:flex;width:1000px;justify-content: space-around;
}
.info{
    width:700px
}
</style>